<template>
  <!-- 用户详情页 -->
  <div>
    <el-card>
      <div class="user-info">
        <div class="img-wrap">
          <img :src="info.avatarUrl" alt="" />
        </div>
        <div class="info-wrap mleft-20">
          <div class="font-24 font-bold">{{ info.nickname }}</div>
          <div class="info-btn">
            <div>
              <el-tag type="danger">lv{{ level }}</el-tag>
              <span class="mleft-10 font-14 sex-wrap">
                <i
                  v-if="info.gender == 1"
                  style="color: #3da1d1"
                  class="el-icon-male"
                ></i>
                <i
                  v-if="info.gender == 2"
                  style="color: #ea5a95"
                  class="el-icon-female"
                ></i>
              </span>
            </div>
            <div v-if="isLogin && profile.userId === userId">
              <button class="btn btn-white" @click="toUserEdit">
                <i class="el-icon-edit"></i>编辑个人信息
              </button>
            </div>
            <div v-else>
              <button class="btn btn-white">
                <i class="el-icon-message"></i>发私信
              </button>
              <button class="btn btn-white mleft-10">
                <i class="el-icon-plus"></i>关注
              </button>
            </div>
          </div>
          <div class="div-line"></div>
          <div class="info-num mtop-10">
            <div class="num-item">
              <div class="font-20 font-bold">{{ info.eventCount }}</div>
              <div class="item-text font-12">动态</div>
            </div>
            <div class="num-item">
              <div class="font-20 font-bold">{{ info.follows }}</div>
              <div class="item-text font-12">关注</div>
            </div>
            <div class="num-item">
              <div class="font-20 font-bold">{{ info.followeds }}</div>
              <div class="item-text font-12">粉丝</div>
            </div>
          </div>
          <div class="desc-item mtop-10 font-14">所在区域：{{ userArea }}</div>
          <div class="desc-item mtop-10 font-14">
            个人介绍：{{ info.signature }}
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName"  class="mtop-10">
        <el-tab-pane label="创建的歌单" name="first">
          <template v-if="list.length === 0">
            <span>加载中...</span>
          </template>
          <ImgListVue
            @clickImg="toplayListDetail"
            :list="creList"
            type="playlist"
          >
            <template v-slot="{ item }">
              <div class="text-hidden">
                {{ item.name }}
              </div>
            </template>
          </ImgListVue>
        </el-tab-pane>
        <el-tab-pane label="收藏的歌单" name="second">
          <template v-if="list.length === 0">
            <span>加载中...</span>
          </template>
          <ImgListVue
            @clickImg="toplayListDetail"
            :list="subList"
            type="playlist"
          >
            <template v-slot="{ item }">
              <div class="text-hidden">
                {{ item.name }}
              </div>
            </template>
          </ImgListVue>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUserDetail, getUserPlayList } from "@/api/request";
import ImgListVue from "@/components/list/ImgList";
const province = require("@/json/province.json");
const city = require("@/json/city.json");
import { mapState } from "vuex";
export default {
  components: { ImgListVue },
  data() {
    return {
      info: {},
      list: [],
      id: 0,
      level: 0,
      followed: false,
      offset: 0,
      activeName: "first",
    };
  },
  computed: {
    ...mapState(["profile", "isLogin"]),
    userId(){
        return this.info.userId;
    },
    userArea() {
      return this.info.province && this.info.city
        ? this.getArea(this.info.province, this.info.city)
        : "用户已经隐藏";
    },
    creList() {
      return this.list.filter((item) => item.userId == this.id);
    },
    subList() {
      const list1 = this.list.filter((item) => item.uesrId !== this.id);
      return list1.filter(
        (item) => !this.creList.some((y) => y.id === item.id)
      );
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.getInfo();
    this.getUserPlayList();
  },
  methods: {
    async getInfo() {
      const { data: res } = await getUserDetail(this.id);
      if (res.code !== 200) return this.$message.error("获取失败");
      this.info = Object.freeze(res.profile);
      this.level = res.level;
      this.followed = res.profile.followed;
      console.log(res);
    },
    getArea(_province, _city) {
      const provinceObj = province.find((item) => item.c == _province);
      const cityObj = city.find((item) => item.c == _city);
      const specialProvince = [
        110000, 120000, 500000, 310000, 810000, 820000, 710000,
      ];
      if (specialProvince.find((item) => item == provinceObj.c));
      return `${provinceObj.n}`;
    },
    //获取用户收藏和创建歌单
    async getUserPlayList() {
      const { data: res } = await getUserPlayList(this.id, this.offset);
      if (res.code !== 200) return;
      if (this.list.length === 0) this.list = res.playlist;
      if (res.more) {
        this.offset += 30;
        this.getUserPlayList();
      }
    },
    toplayListDetail(id) {
      this.$router.push({ path: "/playlistdetail/" + id });
    },
    toUserEdit(){
        this.$router.push('/useredit')
    }
  },
};
</script>

<style lang="less" scoped>
.el-tag {
  height: 25px;
  line-height: 25px;
  padding: 0px 1px;
}
.user-info {
  display: flex;
  .img-wrap {
    height: 200px;
    width: 200px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .div-line {
    width: 980px;
    border-bottom: 1px solid #e6e6e6;
  }
  .info-wrap {
    display: 1;
    .info-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
    }
    .info-num {
      display: flex;
      .num-item {
        width: 80px;
        text-align: center;
        border-right: 1px solid #e6e6e6;
      }
      &:bth-child(3) {
        border: none;
      }
      .item-text {
        color: #676767;
      }
    }
  }
}
</style>